<template>
  <div class="container">
    <ul class="items-list">
      <li v-for="(item,index) in options"
          @click="checkedState(index)">
        <span class="img"></span>
        <p class="text">{{item.name}}</p>
        <i class="checkIcon"
           :class="{'active':item.isShow}"></i>
        <input type="checkbox"
               class="mint-checkbox-input"
               v-model="item.isShow">
      </li>
    </ul>
    <div class="report-button">
      <mt-button size="large"
                 type="danger"
                 @click="distAgent">确认</mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      options: [],
      premisesId: window.localStorage.getItem("2_premisesId")
    };
  },
  mounted: function() {
    this.initPremisesList();
  },
  methods: {
    initPremisesList() {
      var _self = this;
      var body = {};
      body.params = {
        premisesId: _self.premisesId
      };
      var url = _self.utilHelper.apiUrl + "/api/getPartnerByPremises";
      _self.$http.post(url, body).then(response => {
        var data = response.body.resData;
        if (data.result == 1) {
          data.partnerList.forEach(function(item, index) {
            _self.options.push({
              id: data.partnerList[index].partnerId,
              name: data.partnerList[index].accountName,
              isShow: false
            });
          });
        } else {
          Toast({
            message: "数据获取失败",
            position: "middle",
            duration: 2000
          });
        }
      });
    },
    checkedState(chkIndex) {
      var _self = this;
      _self.options.forEach(function(option, index) {
        if (chkIndex == index) {
          _self.options[index].isShow = !_self.options[index].isShow;
        } else {
          _self.options[index].isShow = false;
          if (chkIndex == index) {
            _self.options[index].isShow = !_self.options[index].isShow;
          }
        }
      });
    },
    distAgent() {
      var _self = this;
      var cusPreId = _self.$route.params.id;
      var partnerId = "";
      _self.options.forEach(function(option, index) {
        if (_self.options[index].isShow == true) {
          partnerId = _self.options[index].id;
        }
      });
      if (!partnerId) {
        Toast({
          message: "请选择一个经纪人!",
          position: "middle",
          duration: 2000
        });
        return false;
      }
      var params = {};
      params.userId = _self.userId;
      params.partnerId = partnerId;
      params.cusPreId = cusPreId;
      var url = _self.utilHelper.apiUrl + "/api/distCPAgent";
      this.$http.post(url, params).then(response => {
        var body = response.body;
        var result = body.result;
        var errorMsg = body.errorMsg;
        if ("1" == result) {
          var instance = Toast("提交成功!");
          setTimeout(() => {
            instance.close();
            //跳转待分配列表
            var _self = this;
            _self.$router.replace({
              path: "/customerDetails/" + cusPreId
            });
          }, 3000);
        } else {
          var instance = Toast(errorMsg);
          setTimeout(() => {
            instance.close();
          }, 3000);
        }
      });
    }
  }
};
</script>
<style scoped>
.items-list {
  background-color: #fff;
}
.items-list li {
  height: 42px;
  line-height: 42px;
  padding: 0 30px 0 36px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #cdcdcd;
}
.items-list .img {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 14px;
  height: 14px;
  background: url(../assets/images/checkImg.png) no-repeat;
  background-size: 14px auto;
}

.items-list .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}
.checkIcon {
  position: absolute;
  right: 10px;
  width: 18px;
  height: 18px;
  background: url(../assets/images/checked.png) no-repeat;
  background-position: 0 0;
  background-size: 36px auto;
  top: 12px;
}
.checkIcon.active {
  background-position: -18px 0;
}

.report-button {
  padding: 0 10px;
}
.report-button .mint-button--danger {
  background-color: #eb6100;
  margin-top: 20px;
}
</style>